<template>
        <div class="mui-numbox" data-numbox-min='1' >
			<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
            <!-- change事件可以监听value值的任何改变 ，这里的ref主要是把改元素挂到refs中去，方便获取该元素-->
			<input id="test" class="mui-input-numbox" type="number" value="1" @change="changednum" ref="num"/>
			<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
       </div>
</template>
<script>
import mui from '../../lib/mui/js/mui.js'
export default {
    data(){
        return {
        }
    },
    methods:{
        // 这个方法就是特有的监听数量改变的方法change的方法名，只要有变化就会触发该事件
        changednum(){
        //    this.$refs.num.value ---- 这个主要是获取数量
            // 下面这个就是指子元素调用父元素的countnum方法，并且给父元素的方法传值
            this.$emit('countnum',parseInt(this.$refs.num.value))
           
            //  console.log(this.$refs.num.value+"子")
        }
    },
    mounted(){
        mui('.mui-numbox').numbox()
    },
    props:["maxnum"],
    watch:{  //属性监听，
        // 使用js的Api来设置numbox的最大值
        maxnum:function (newobj,oldobj){
            mui('.mui-numbox').numbox().setOption('max',newobj)
        }
    }
}
</script>
<style lang="scss" scoped>

</style>